import React, { PureComponent } from 'react';
import { Input, Button, message } from 'antd';
// 引入scss
import './QRCode.scss'
const { TextArea } = Input;
export default class QRCode extends PureComponent {
  constructor() {
    super()
    this.state = {
      // 是否显示二维码
      isCode: true,
      // 多行文本框的内容
      textArea: ''
    }
  }
  // 显示二维码的函数
  isCodeFun = () => {
    // 输入框不为空
    let textArea = this.state.textArea.replace(/\s+/g, "");
    if (!textArea) {
      message.error({ content: '请输入要转换的内容', className: 'bulletChatMessage' });
      return;
    }
    this.setState({
      isCode: false
    })
  }
  // input输入时的回调函数
  handleInput = ({ target }) => {
    let { name, value } = target
    // 设置input和state同步
    this.setState({
      [name]: value
    })
  }
  // 返回输入框
  textareaCode = () => {
    this.setState({
      isCode: true,
      textArea: ''
    })
  }
  render () {
    let { isCode, textArea } = this.state;
    // 二维码链接
    let Code = `http://api.molure.cn/qrcode/api.php?text=${textArea}&size=200`;
    return (
      <div className='QRCode'>
        {
          isCode ?
            // 输入框内容
            <div className='QRCode_Textarea'>
              <TextArea rows={6} style={{ marginBottom: '5px', resize: 'none' }} placeholder='输入要转换的内容或者网址' value={textArea} name='textArea' onChange={this.handleInput} maxLength='100' />
              <Button onClick={this.isCodeFun}>生成二维码</Button>
            </div>
            :
            // 显示二维码
            <div className='QRCode_Code'>
              <img src={Code} alt="二维码" />
              <a href={Code} download='二维码'>
                <Button>保存到手机</Button>
              </a>
              {/* 返回输入框 */}
              <Button onClick={this.textareaCode}>在来一个</Button>
            </div>
        }
      </div >
    )
  }
}